<template>
  <!-- 内容 -->

  <div class="contentbg">
    <div class="channelpp">
      <img src="../../assets/img/pp_contact.jpg" alt="" />
    </div>
    <!--  -->
    <div class="centernav2">
      <!--  -->
      <div class="channelleft">
        <div class="channeltitle">
          <img src="../../assets/img/channeltitle_contact.png" alt="" />
        </div>
        <div class="channelname">
          <div class="leftbanner">
            <a href="">
              <img
                src="../../assets/phone.jpg"
                alt=""
                width="256"
                height="50"
              />
            </a>
          </div>
          <div class="leftbanner">
            <a href="">
              <img src="../../assets/img/leftbanner2.png" alt="" />
            </a>
          </div>
        </div>
      </div>
      <div class="line2"></div>
      <!--  -->
      <div class="channelright">
        <div class="location">
          <div class="hpico">
            <img src="../../assets/img/homepageico.png" alt="" />
          </div>
          <div class="locationadd">
            {{ $t("msg.homepage") }} -{{ $t("msg.navbar.contents") }}
          </div>
        </div>
        <div class="pagecontent">
          <!-- 表单 -->
          <div id="form">
            <el-form
              ref="LJformRef"
              label-width="30px"
              :model="LJform"
              hide-required-asterisk
            >
              <!-- 留言内容 -->
              <el-form-item
                prop="remarks"
                :rules="[
                  {
                    required: true,
                    message: $t(`msg.contents.children.chilA`),
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="LJform.remarks"
                  :placeholder="$t(`msg.contents.contentsA`)"
                  type="textarea"
                ></el-input>
              </el-form-item>
              <!-- 姓名-号码 -->
              <div style="width: 100%; display: flex">
                <el-form-item
                  prop="name"
                  :rules="[
                    {
                      required: true,
                      message: $t(`msg.contents.children.chilB`),
                      trigger: 'blur',
                    },
                  ]"
                >
                  <div style="width: 282px">
                    <el-input
                      v-model="LJform.name"
                      :placeholder="$t(`msg.contents.contentsB`)"
                    ></el-input>
                  </div>
                </el-form-item>
                <!--  -->
                <el-form-item
                  prop="phone"
                  :rules="[
                    {
                      required: true,
                      message: $t(`msg.contents.children.chilC`),
                      trigger: 'blur',
                    },
                  ]"
                >
                  <div style="width: 282px">
                    <el-input
                      v-model="LJform.phone"
                      :placeholder="$t(`msg.contents.contentsC`)"
                    ></el-input>
                  </div>
                </el-form-item>
              </div>
              <!-- 传真号码-邮箱 -->
              <div style="width: 100%; display: flex">
                <el-form-item
                  prop="czPhone"
                  :rules="[
                    {
                      required: true,
                      message: $t(`msg.contents.children.chilD`),
                      trigger: 'blur',
                    },
                  ]"
                >
                  <div style="width: 282px">
                    <el-input
                      v-model="LJform.czPhone"
                      :placeholder="$t(`msg.contents.contentsD`)"
                    ></el-input>
                  </div>
                </el-form-item>
                <!--  -->
                <el-form-item
                  prop="email"
                  :rules="[
                    {
                      required: true,
                      message: $t(`msg.contents.children.chilE`),
                      trigger: 'blur',
                    },
                  ]"
                >
                  <div style="width: 282px">
                    <el-input
                      v-model="LJform.email"
                      :placeholder="$t(`msg.contents.contentsE`)"
                    ></el-input>
                  </div>
                </el-form-item>
              </div>
              <!-- 地址 -->
              <el-form-item
                prop="adds"
                :rules="[
                  {
                    required: true,
                    message: $t(`msg.contents.children.chilF`),
                    trigger: 'blur',
                  },
                ]"
              >
                <div style="width: 282px">
                  <el-input
                    v-model="LJform.adds"
                    :placeholder="$t(`msg.contents.contentsF`)"
                  ></el-input>
                </div>
              </el-form-item>
              <!-- 提交 -->
              <el-form-item>
                <el-button
                  @click="submitForm()"
                  style="background-color: #1074bc; color: #fff"
                  >{{ $t("msg.DetailedList.submit") }}</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { LeaveMessage } from "../../api/Message";
const LJform = reactive({
  name: "", //姓名
  phone: "", //号码
  czPhone: "", //传真号码
  email: "", //邮箱
  adds: "", //地址
  remarks: "", //留言
});
const LJformRef = ref(null);
const submitForm = () => {
  LJformRef.value.validate((valid) => {
    if (valid) {
      LeaveMessage(LJform).then((res) => {
        console.log(res);
        LJformRef.value.resetFields()
      });
      ElMessage.success("表单提交成功 !");
    } else {
      ElMessage.error("请把表单补充完整 !");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.contentbg {
  width: 1200px;
  overflow: hidden;
  margin: 0px auto;
  background: url(@/assets/contentbg.png);
  background-repeat: repeat-y;
  font-size: 12px;
  .channelpp {
    width: 100%;
    text-align: center;
    height: 240px;
    img {
      margin-top: 11px;
    }
  }

  //

  .centernav2 {
    width: 1000px;
    margin: 0px auto;
    overflow: hidden;
    .channelleft {
      width: 310px;
      float: left;
      overflow: hidden;
      img {
        margin: 0;
        padding: 0;
        border: none;
      }

      .channelname {
        width: 262px;
        overflow: hidden;
        margin: 16px auto;
        .leftbanner {
          width: 100%;
          margin: 12px auto;
          text-align: center;
          img {
            margin: 0;
            padding: 0;
            border: none;
          }
        }
      }
    }
    .line2 {
      height: 400px;
      width: 30px;
      overflow: hidden;
      float: left;
      background: url(../../assets/img/line2.jpg);
      background-repeat: no-repeat;
      background-position: top center;
    }
    .channelright {
      width: 660px;
      float: left;
      overflow: hidden;
      .location {
        width: 90%;
        height: 30px;
        line-height: 30px;
        background: #f6f5fe;
        margin: 12px auto;
        .hpico {
          width: 10%;
          height: 30px;
          text-align: center;
          float: left;
        }
        .locationadd {
          width: 90%;
          float: left;
          height: 30px;
          text-align: left;
        }
      }
      .pagecontent {
        margin: 20px 0;
        width: 95%;
      }
    }
  }
}
</style>
